<template>
	<view>
		<view class="area-q"><image src="../../static/img/xianc.png" mode=""></image></view>
		<view class="area-w">
			<view class="area-e">
				<view class="area-r" @click="goArea">
					<view class="area-t"><image src="../../static/img/cai.png" mode=""></image></view>
					<view class="area-y">躺平鸭小夜灯儿童充电卧室柔光睡眠拍拍灯...</view>
					<view class="area-u">
						<view class="area-i">300豆</view>
						<view class="area-o">已售30件</view>
					</view>
				</view>
				<view class="area-r">
					<view class="area-t"><image src="../../static/img/cai.png" mode=""></image></view>
					<view class="area-y">躺平鸭小夜灯儿童充电卧室柔光睡眠拍拍灯...</view>
					<view class="area-u">
						<view class="area-i">300豆</view>
						<view class="area-o">已售30件</view>
					</view>
				</view>
				<view class="area-r">
					<view class="area-t"><image src="../../static/img/cai.png" mode=""></image></view>
					<view class="area-y">躺平鸭小夜灯儿童充电卧室柔光睡眠拍拍灯...</view>
					<view class="area-u">
						<view class="area-i">300豆</view>
						<view class="area-o">已售30件</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		goArea(){
			this.$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:""} })
		},
	}
};
</script>

<style lang="less" scoped>
.area-q {
	height: 686rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.area-w {
	width: 94%;
	margin: 24rpx auto;
	.area-e {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.area-r {
			width: 343rpx;
			height: 448rpx;
			border-radius: 16rpx;
			background: #fff;
			margin-bottom: 24rpx;
			.area-t {
				height: 304rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.area-y {
				width: 94%;
				margin: 20rpx auto;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				display: -webkit-box;
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}
			.area-u {
				width: 94%;
				margin: -16rpx auto;
				display: flex;
				justify-content: space-between;
				.area-i {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ff1a1a;
					line-height: 36rpx;
				}
				.area-o {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
	}
}
</style>
